<!--
 * @Author: lg
 * @Date: 2023-09-01 15:31:44
 * @LastEditors: lg
 * @LastEditTime: 2024-07-19 14:52:40
 * @Description:图片组件,包加载失败占位,异步加载图片,已引入本地图片前缀,只需转入图片名称及后缀即可展示
 * @FilePath: \ssii-user-bk\src\components\hb-image-plus\index.vue
-->
<template>
  <el-image
    :src="checkImgUrl(imgUrl) ? imgUrl : getDynamicImages(imgUrl)"
    v-bind="$attrs"
    class="hb-image-area"
  >
    <!-- 图片展示失败的占位图 -->
    <template #error>
      <div class="image-slot">
        <!-- <el-icon><icon-picture /></el-icon> -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 1024 1024"
          data-v-c1e72660=""
        >
          <path
            fill="currentColor"
            d="M160 160v704h704V160zm-32-64h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32"
          ></path>
          <path
            fill="currentColor"
            d="M384 288q64 0 64 64t-64 64q-64 0-64-64t64-64M185.408 876.992l-50.816-38.912L350.72 556.032a96 96 0 0 1 134.592-17.856l1.856 1.472 122.88 99.136a32 32 0 0 0 44.992-4.864l216-269.888 49.92 39.936-215.808 269.824-.256.32a96 96 0 0 1-135.04 14.464l-122.88-99.072-.64-.512a32 32 0 0 0-44.8 5.952z"
          ></path>
        </svg>
      </div>
    </template>
  </el-image>
</template>

<script lang="ts" setup>
// import { Picture as IconPicture } from '@element-plus/icons-vue';
import getDynamicImages from '@/utils/get-dynamic-images/index';
defineProps({
  imgUrl: {
    type: String,
    required: true
  }
});
const checkImgUrl = (url: string) => {
  return url?.includes('https') || url?.includes('http');
};
</script>
<style scoped lang="scss">
.hb-image-area {
  // width: 100%;
  // height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-slot {
  width: 100%;
  background: linear-gradient(180deg, #ffae62 0%, #fc6428 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
